<!--
 * @Date: 2023-02-21 11:17:48
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-03-07 16:00:45
 * @FilePath: \sososn-web-new\src\views\solution\solutionDetails\index.vue
-->
<template>
  <div class="solution">
    <div
      class="solution-header flex-col"
      :style="{ background: `url(${imgUrl}) no-repeat`, 'background-size': '100% 100%' }"
    >
      <div class="header-content">
        <p class="text-title">{{ pageObject.bannerTitle }}</p>
        <p class="text-sub">
          {{ pageObject.bannerContent }}
        </p>
      </div>
    </div>
    <div class="solution-wapper">
      <div class="group1 flex-col items-center">
        <p class="group1-title" data-aos="fade-up">行业痛点</p>

        <ul class="text-list flex-row" data-aos="fade-up" data-aos-delay="500">
          <li>
            <el-image class="text-bg" :src="$getAssetsImages('num1.png')" />
            <span
              >行业数字化总体程度不高，多数企业内部各种信息化软件相互孤立，尚未实现“数据标准的统一”</span
            >
          </li>
          <li>
            <el-image class="text-bg" :src="$getAssetsImages('num2.png')" />
            <span>受价格波动影响大，外部的价格波动具有突发性，可以快速传导到企业，可预测性差</span>
          </li>
          <li>
            <el-image class="text-bg" :src="$getAssetsImages('num3.png')" />
            <span
              >产业链上下游企业之间的交易、订单、合同、物流、金融等环节未形成闭环，仍然需要大量线下操作才能完成，协同效率低下</span
            >
          </li>
          <li>
            <el-image class="text-bg" :src="$getAssetsImages('num4.png')" />
            <span>行业供应链金融存在“掣肘”，难以帮助中小微企业解决“融资难”的困境</span>
          </li>
        </ul>
      </div>
      <div class="group2 flex-col items-center">
        <p class="group2-title" data-aos="fade-up">解决方案</p>
        <div class="group2-content flex-row">
          <el-image
            :src="$getAssetsImages('fangan.png')"
            class="group2-image"
            data-aos="fade-up"
            data-aos-delay="200"
          />
          <div class="text-content">
            <p class="text1" data-aos="fade-up" data-aos-delay="500">
              大宗建材行业数字化建设解决方案
            </p>

            <ul class="text-items flex-col">
              <li data-aos="fade-up" data-aos-delay="1000">
                针对大宗建材企业的交易特点，为企业构建“链盈”交易平台，提供适用大宗建材行业的系统化功能，强化连接、销售、服务、数据驱动的能力，让交易更简单。
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="group3 flex-col items-center">
        <p class="group3-title" data-aos="fade-up">方案价值</p>
        <ul class="card-items flex-row" data-aos="fade-up" data-aos-delay="500">
          <li class="flex-col">
            <div class="card-header items-center">
              <el-image :src="$getAssetsImages('jiazhi1.png')" class="icon-image" />
              <p class="text-title">简化供采交易路径，全链路数字化</p>
            </div>
            <p class="text-content">
              平台整合产业链上、下游交易数据，将线下、线上进行一体化融合，实现业务的全流程覆盖
            </p>
          </li>
          <li class="flex-col">
            <div class="card-header items-center">
              <el-image :src="$getAssetsImages('jiazhi2.png')" class="icon-image" />
              <p class="text-title">全链供需一站式管理，提高运营综合效率</p>
            </div>
            <p class="text-content">
              10年大数据、人工智能、云计算经验积累、关键算法研究，助力企业用数据驱动智能运营与业务增长
            </p>
          </li>
          <li class="flex-col">
            <div class="card-header items-center">
              <el-image :src="$getAssetsImages('jiazhi3.png')" class="icon-image" />
              <p class="text-title">授信支付与供应链金融，安全可靠轻松交易</p>
            </div>
            <p class="text-content">
              数字化专家团队，深度融入企业数字化业务，为企业量身定制规范、高效的数字化解决方案
            </p>
          </li>
          <li class="flex-col">
            <div class="card-header items-center">
              <el-image :src="$getAssetsImages('jiazhi4.png')" class="icon-image" />
              <p class="text-title">及时掌握行业动态、市场趋势、价格指数</p>
            </div>
            <p class="text-content">
              打造区域合伙人联合运营模式，与合伙人资源共享，携手共建区域生态圈，助力企业成为区域龙头
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { bulkMaterials, energy, software } from './js/useObject'

import { useRoute } from 'vue-router'

const route = useRoute()

const getData = flag => {
  const obj = {
    bulkMaterials,
    energy,
    software
  }
  return obj[flag]
}
const pageObject = getData(route.params.details)

const $getAssetsImages = inject('$getAssetsImages')
const imgUrl = $getAssetsImages('solutionDetails.png')
</script>
<style lang="scss" scoped>
/* @use ''; 引入css类 */
@use '../scss/solutionDetails.scss';
</style>
